<template>
  <ul class="app_tab">
    <li v-for="(item, index) in tabList" :key="index" :class="{active:$store.state.checkTxt == item.val}" @click="$store.commit('tabCut',item.val)">{{ item.name }}</li>
  </ul>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
export default {
  setup() {
    const data = reactive({
      tabList: [
        { name: "全部", val: "" },
        { name: "精华", val: "good" },
        { name: "分享", val: "share" },
        { name: "问答", val: "ask" },
        { name: "招聘", val: "job" },
        { name: "客户端测试", val: "kehu" },
      ]
    });
    return {
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.app_tab {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background: #f6f6f6;
  li {
    font-size: 14px;
    color: #99bf5c;
    padding: 4px 8px;
  }
  .active{
    background: #99bf5c;
    color: #fff;
  }
}
</style>